<template>
  <div>
    <div class="rightSide" @mouseenter="onMouseenter"></div>
    <el-drawer v-model="isShowDrawer" direction="ltr" custom-class="drawer" :size="250">
      <el-scrollbar>
        <el-menu background-color="rgba(19, 27, 60, 0.95)" text-color="#fff" active-text-color="#409eff" router :default-active="activePath" style="border-right: none" :unique-opened="true" :collapse-transition="true">

          <!-- 一级菜单 -->
          <el-sub-menu v-for="item in menulist" :key="item.id" :index="'/'+item.path">
            <template #title>
              <i :class="icons[item.id]"></i>
              <span>{{item.authName}}</span>
            </template>
            <!-- 二级菜单 -->
            <el-sub-menu v-for="item2 in item.children" :key="item2.id" :index="'/'+item2.path">
              <template #title>
                <i class="iconfont icon-caidan"></i>
                <span>{{item2.authName}}</span>
              </template>
              <!-- 三级菜单 -->
              <el-menu-item v-for="item3 in item2.children" :key="item3.id" :index="'/'+item3.path" @click="saveNavState('/' + item3.path)">
                <i class="iconfont icon-erjicaidan-shubiaohuadong" style="font-size:1.2rem;margin-right:0.5rem"></i>
                <span>{{item3.authName}}</span>
              </el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowDrawer: true,
      activePath: "", //保存跳转链接
      icons: {
        1: "iconfont icon-zonghenengyuan",
        2: "iconfont icon-jiankongshexiangtou-xianxing",
        3: "iconfont icon-gaojing",
        4: "iconfont icon-yunwei",
        5: "iconfont icon-xitong",
      },
      menulist: [
        {
          id: 1,
          authName: "能源管理",
          path: "1",
          children: [
            {
              id: 101,
              authName: "能耗总览",
              path: "101",
              children: [
                {
                  id: 10101,
                  authName: "驾驶舱",
                  path: "home",
                  children: [],
                },
                {
                  id: 10102,
                  authName: "驾驶舱2",
                  path: "cockpit",
                  children: [],
                },
                {
                  id: 10103,
                  authName: "GIS地图",
                  path: "screen",
                  children: [],
                },
              ],
            },
            {
              id: 102,
              authName: "能耗数据",
              path: "102",
              children: [
                {
                  id: 10201,
                  authName: "能耗查询",
                  path: "inquire",
                  children: [],
                },
                {
                  id: 10202,
                  authName: "横向对比",
                  path: "compared",
                  children: [],
                },
                {
                  id: 10202,
                  authName: "同比环比",
                  path: "compared2",
                  children: [],
                },
              ],
            },
            {
              id: 103,
              authName: "能耗分析",
              path: "103",
              children: [
                {
                  id: 10301,
                  authName: "能耗分项",
                  path: "sub-option2",
                  children: [],
                },
                {
                  id: 10302,
                  authName: "昼夜分析",
                  path: "analysis2",
                  children: [],
                },
              ],
            },
            {
              id: 104,
              authName: "用能管理",
              path: "104",
              children: [
                {
                  id: 10401,
                  authName: "能耗排名",
                  path: "sub-option3",
                  children: [],
                },
                {
                  id: 10402,
                  authName: "能耗公示",
                  path: "sub-option",
                  children: [],
                },
                {
                  id: 10403,
                  authName: "定额管理",
                  path: "sub-option4",
                  children: [],
                },
                {
                  id: 10404,
                  authName: "用能考核",
                  path: "sub-option5",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          authName: "设备监控",
          path: "2",
          children: [
            {
              id: 201,
              authName: "暖通空调系统",
              path: "201",
              children: [
                {
                  id: 20101,
                  authName: "冷热源系统",
                  path: "cold-heat",
                  children: [],
                },
                {
                  id: 20102,
                  authName: "空调箱系统",
                  path: "air-conditioning",
                  children: [],
                },
                {
                  id: 20103,
                  authName: "风机盘管系统",
                  path: "fan-coil",
                  children: [],
                },
              ],
            },
            {
              id: 202,
              authName: "智能监控系统",
              path: "202",
              children: [
                {
                  id: 20201,
                  authName: "低压配电系统",
                  path: "low-voltage",
                  children: [],
                },
                {
                  id: 20202,
                  authName: "公区照明系统",
                  path: "public-lighting",
                  children: [],
                },
                {
                  id: 20203,
                  authName: "景观照明系统",
                  path: "land-lighting",
                  children: [],
                },
                {
                  id: 20204,
                  authName: "电热水器系统",
                  path: "water-heater",
                  children: [],
                },
                {
                  id: 20205,
                  authName: "电梯监控系统",
                  path: "elevator-monitor",
                  children: [],
                },
                {
                  id: 20206,
                  authName: "广场喷泉系统",
                  path: "square-fountain",
                  children: [],
                },
                {
                  id: 20207,
                  authName: "给排水监控系统",
                  path: "drainage",
                  children: [],
                },
                {
                  id: 20208,
                  authName: "电动遮阳帘系统",
                  path: "electric-sun-shade",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 3,
          authName: "告警管理",
          path: "3",
          children: [
            {
              id: 301,
              authName: "告警管理",
              path: "301",
              children: [
                {
                  id: 30101,
                  authName: "当日告警",
                  path: "warn-alarm",
                  children: [],
                },
                {
                  id: 30102,
                  authName: "历史告警",
                  path: "warn-history",
                  children: [],
                },
                {
                  id: 30103,
                  authName: "告警设置",
                  path: "warn-set",
                  children: [],
                },
                {
                  id: 30104,
                  authName: "时间策略",
                  path: "warn-time",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 4,
          authName: "运维管理",
          path: "4",
          children: [
            {
              id: 401,
              authName: "报修管理",
              path: "401",
              children: [
                {
                  id: 40101,
                  authName: "工单报修管理",
                  path: "gd-order-repair",
                  children: [],
                },
                {
                  id: 40102,
                  authName: "工单关单管理",
                  path: "gd-closing",
                  children: [],
                },
                {
                  id: 40103,
                  authName: "工单受单管理",
                  path: "gd-acceptance-sp",
                  children: [],
                },
                {
                  id: 40104,
                  authName: "工单派单管理",
                  path: "gd-orders",
                  children: [],
                },
                {
                  id: 40105,
                  authName: "工单执行管理",
                  path: "gd-implement",
                  children: [],
                },
                {
                  id: 40106,
                  authName: "工单综合管理",
                  path: "production-orders",
                  children: [],
                },
              ],
            },
            {
              id: 402,
              authName: "巡检管理",
              path: "402",
              children: [
                {
                  id: 40201,
                  authName: "巡检条目",
                  path: "inspect-item",
                  children: [],
                },
                {
                  id: 40202,
                  authName: "巡检内容",
                  path: "inspect-content",
                  children: [],
                },
                {
                  id: 40203,
                  authName: "巡检线路",
                  path: "inspect-line",
                  children: [],
                },
                {
                  id: 40204,
                  authName: "巡检计划",
                  path: "inspect-plan",
                  children: [],
                },
                {
                  id: 40205,
                  authName: "综合管理",
                  path: "inspect-manage",
                  children: [],
                },
                {
                  id: 40206,
                  authName: "异常查询",
                  path: "inspect-abnormal",
                  children: [],
                },
              ],
            },
            {
              id: 403,
              authName: "工程仓库",
              path: "403",
              children: [
                {
                  id: 40301,
                  authName: "供货管理",
                  path: "provider",
                  children: [],
                },
                {
                  id: 40302,
                  authName: "物品类别",
                  path: "goods-cate",
                  children: [],
                },
                {
                  id: 40303,
                  authName: "物品管理",
                  path: "goods",
                  children: [],
                },
                {
                  id: 40304,
                  authName: "入库管理",
                  path: "enter-warehouse",
                  children: [],
                },
                {
                  id: 40305,
                  authName: "出库管理",
                  path: "out-of-warehouse",
                  children: [],
                },
                {
                  id: 40306,
                  authName: "库存清单",
                  path: "stock",
                  children: [],
                },
                {
                  id: 40307,
                  authName: "台账记录",
                  path: "ledger-rep",
                  children: [],
                },
                {
                  id: 40308,
                  authName: "材料报表",
                  path: "material-rep",
                  children: [],
                },
                {
                  id: 40309,
                  authName: "月度结转",
                  path: "carry-over",
                  children: [],
                },
              ],
            },
            {
              id: 404,
              authName: "设备管理",
              path: "404",
              children: [
                {
                  id: 40401,
                  authName: "设备台账",
                  path: "equip-ledger",
                  children: [],
                },
                {
                  id: 40402,
                  authName: "设备档案属性",
                  path: "equip-attr",
                  children: [],
                },
                {
                  id: 40403,
                  authName: "设备模板管理",
                  path: "definition",
                  children: [],
                },
                {
                  id: 40404,
                  authName: "设备档案模板",
                  path: "template",
                  children: [],
                },
                {
                  id: 40405,
                  authName: "生命周期管理",
                  path: "life-time",
                  children: [],
                },
                {
                  id: 40406,
                  authName: "设备预警管理",
                  path: "warn",
                  children: [],
                },
                {
                  id: 40407,
                  authName: "字典管理",
                  path: "dictionary",
                  children: [],
                },
              ],
            },
            {
              id: 405,
              authName: "知识库管理",
              path: "405",
              children: [
                {
                  id: 40501,
                  authName: "知识库维护",
                  path: "knowledge-uphold",
                  children: [],
                },
                {
                  id: 40502,
                  authName: "知识库检索",
                  path: "knowledge-search",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 5,
          authName: "运维管理",
          path: "5",
          children: [
            {
              id: 501,
              authName: "运维配置",
              path: "501",
              children: [
                {
                  id: 50101,
                  authName: "员工管理",
                  path: "staff-manage",
                  children: [],
                },
                {
                  id: 50102,
                  authName: "角色管理",
                  path: "role-manage",
                  children: [],
                },
                {
                  id: 50103,
                  authName: "部门管理",
                  path: "dep-manage",
                  children: [],
                },
                {
                  id: 50104,
                  authName: "仓库管理",
                  path: "ware-manage",
                  children: [],
                },
                {
                  id: 50105,
                  authName: "仓库权限管理",
                  path: "ware-permission",
                  children: [],
                },
                {
                  id: 50106,
                  authName: "维修工时管理",
                  path: "maintain-Hour",
                  children: [],
                },
                {
                  id: 50107,
                  authName: "维修项目",
                  path: "maintain-pro",
                  children: [],
                },
                {
                  id: 50108,
                  authName: "地点管理",
                  path: "place-manage",
                  children: [],
                },
                {
                  id: 50109,
                  authName: "电话管理",
                  path: "phone-manage",
                  children: [],
                },
              ],
            },
            {
              id: 502,
              authName: "用户信息",
              path: "502",
              children: [
                {
                  id: 50201,
                  authName: "修改密码",
                  path: "change-pwd",
                  children: [],
                },
                {
                  id: 50202,
                  authName: "登录日志",
                  path: "login-log",
                  children: [],
                },
              ],
            },
            {
              id: 503,
              authName: "新闻配置",
              path: "503",
              children: [
                {
                  id: 50301,
                  authName: "添加新闻",
                  path: "add-news",
                  children: [],
                },
                {
                  id: 50302,
                  authName: "栏目管理",
                  path: "news-program",
                  children: [],
                },
                {
                  id: 50303,
                  authName: "新闻管理",
                  path: "news",
                  children: [],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    if (window.sessionStorage.getItem("activePath") === null) {
      this.activePath = "/home";
    } else {
      this.activePath = window.sessionStorage.getItem("activePath");
      console.log("created-activePath", this.activePath);
    }
  },
  methods: {
    onMouseenter() {
      this.isShowDrawer = true;
    },
    //保存链接的激活状态
    saveNavState(activePath) {
      console.log("activePath", activePath);
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
  },
};
</script>


<style lang="less" scoped>
.rightSide {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  opacity: 0;
}
/deep/.drawer {
  background: rgba(19, 27, 60, 0.95);
}

/deep/.el-drawer__body {
  overflow-y: auto;
}

.el-menu-item:hover {
  background: rgba(84, 122, 179, 0.5);
}

i {
  margin-right: 0.3rem;
}
</style>